<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>流水记录 | 精品应用</title>
  <!-- Font Awesome 图标库 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/medicalrecord.css">
</head>
<body>
<!-- 顶部标题栏 -->
<div class="header">
  <div class="header-content">
    <a href="javascript:history.back()" class="back-btn">
      <i class="fas fa-arrow-left"></i>
    </a>
    <h1 class="header-title">病历列表</h1>
    <div class="action-btn" id="refreshBtn">
      <i class="fas fa-sync-alt"></i>
    </div>
  </div>
</div>

<!-- 主要内容 -->
<div class="container-custom">

  <!-- 流水记录卡片 -->
  <div class="transactions-card">

    <div class="table-container">
      <table class="transactions-table">
        <thead>
        <tr>
          <th width="60%">病历名称</th>

          <th width="40%">操作</th>
        </tr>
        </thead>
        <tbody id="transactionList">
        <!-- 数据加载状态 -->
        <tr>
          <td colspan="4">
            <div class="loading-container">
              <div class="loading-spinner"></div>
              <div class="loading-text">正在加载病历列表...</div>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页控件 -->
    <div class="pagination">
      <button class="pagination-btn" id="prevBtn" disabled>
        <i class="fas fa-chevron-left"></i> 上一页
      </button>
      <span id="pageInfo">第 1 页</span>
      <button class="pagination-btn" id="nextBtn" disabled>
        下一页 <i class="fas fa-chevron-right"></i>
      </button>
    </div>
  </div>
</div>

<div class="footer">
  © 2025 智能E生 · 版权所有
</div>

<script>
  // 当前页码和页面大小
  let currentPage = 1;
  const pageSize = 5;
  let totalPages = 1;

  // 从API获取数据
  async function fetchData(page = 1) {
    try {
      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500));

      // 模拟API响应数据
      const response = {
        success: true,
        message: "数据获取成功",
        data: {
          balance: 8450.00,
          monthlyIncome: 12800.00,
          monthlyExpense: 4350.00,
          transactions: [
            { id: 1, name: "工资收入", type: "income", amount: 8500.00, date: "2023-06-05", category: "工资" },
            { id: 2, name: "超市购物", type: "expense", amount: 356.80, date: "2023-06-07", category: "食品" },
            { id: 3, name: "房租", type: "expense", amount: 2800.00, date: "2023-06-08", category: "住房" },
            { id: 4, name: "项目奖金", type: "income", amount: 2000.00, date: "2023-06-10", category: "奖金" },
            { id: 5, name: "餐厅用餐", type: "expense", amount: 128.00, date: "2023-06-11", category: "餐饮" },
            { id: 6, name: "交通费用", type: "expense", amount: 65.50, date: "2023-06-12", category: "交通" },
            { id: 7, name: "兼职收入", type: "income", amount: 1200.00, date: "2023-06-15", category: "兼职" },
            { id: 8, name: "电影票", type: "expense", amount: 80.00, date: "2023-06-16", category: "娱乐" },
            { id: 9, name: "水电费", type: "expense", amount: 210.00, date: "2023-06-18", category: "生活" },
            { id: 10, name: "理财产品收益", type: "income", amount: 110.50, date: "2023-06-20", category: "投资" }
          ],
          total: 10,
          page: page,
          pageSize: pageSize,
          totalPages: 2
        }
      };

      return response;
    } catch (error) {
      console.error('API请求失败:', error);
      return {
        success: false,
        message: "请求失败，请稍后重试"
      };
    }
  }

  // 渲染流水列表
  function renderTransactions(transactions) {
    const container = document.getElementById('transactionList');

    if (transactions.length === 0) {
      container.innerHTML = `
                    <tr>
                        <td colspan="4">
                            <div class="empty-state">
                                <i class="fas fa-file-invoice-dollar"></i>
                                <p>暂无流水记录</p>
                                <button class="btn-refresh" id="emptyRefreshBtn">刷新数据</button>
                            </div>
                        </td>
                    </tr>
                `;

      document.getElementById('emptyRefreshBtn').addEventListener('click', () => {
        loadData();
      });

      return;
    }

    let html = '';

    // 计算当前页数据的起始索引
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = Math.min(startIndex + pageSize, transactions.length);
    const pageData = transactions.slice(startIndex, endIndex);

    pageData.forEach(transaction => {
      html += `
                    <tr>
                        <td>
                            <div class="transaction-name">${transaction.name}</div>
                        </td>
                        <td>
                            <button class="btn-detail" data-id="${transaction.id}">
                                <i class="fas fa-info-circle"></i> 详情
                            </button>
                        </td>
                    </tr>
                `;
    });

    container.innerHTML = html;

    // 添加详情按钮事件
    document.querySelectorAll('.btn-detail').forEach(btn => {
      btn.addEventListener('click', function() {
        const id = this.getAttribute('data-id');
        showTransactionDetail(id);
      });
    });
  }

  // 显示交易详情
  function showTransactionDetail(id) {
    alert(`显示交易ID ${id} 的详情\n在实际应用中，这里会打开一个详情弹窗或跳转到详情页`);
  }

  // 更新分页控件
  function updatePagination(total, page, totalPages) {
    document.getElementById('pageInfo').textContent = `第 ${page} 页 / 共 ${totalPages} 页`;

    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    prevBtn.disabled = page === 1;
    nextBtn.disabled = page === totalPages;
  }

  // 加载数据
  async function loadData(page = 1) {
    currentPage = page;

    // 显示加载状态
    const container = document.getElementById('transactionList');
    container.innerHTML = `
                <tr>
                    <td colspan="4">
                        <div class="loading-container">
                            <div class="loading-spinner"></div>
                            <div class="loading-text">正在加载流水记录...</div>
                        </div>
                    </td>
                </tr>
            `;

      //const response = await fetchData(page);

      // 这里应该是实际的注册逻辑
      fetch("/AiMedical/api/medicalrecord/queryByPage?page="+ page +"&pageSize=" + pageSize,{
        method: "GET",
        headers:{
          "Content-Type":"application/json"
        },
      }).then(
              response => response.json()
      ).then(data => {

        if(data.code != 0){
          container.innerHTML = `
                    <tr>
                        <td colspan="4">
                            <div class="empty-state">
                                <i class="fas fa-exclamation-triangle"></i>
                                <p>加载数据失败: ${data.msg}</p>
                                <button class="btn-refresh" id="errorRefreshBtn">重新加载</button>
                            </div>
                        </td>
                    </tr>
                `;

          document.getElementById('errorRefreshBtn').addEventListener('click', () => {
            loadData(page);
          });
        }else{

          var dataObj = data.content;

          // 更新交易列表
          renderTransactions(dataObj.rows);

          // 保存总页数
          totalPages = dataObj.total % pageSize;

          // 更新分页信息
          updatePagination(dataObj.total, page, totalPages);

        }


      }).catch(error => {
        console.error('加载数据失败:', error);
        container.innerHTML = `
                    <tr>
                        <td colspan="4">
                            <div class="empty-state">
                                <i class="fas fa-exclamation-triangle"></i>
                                <p>加载数据失败: ${error.message}</p>
                                <button class="btn-refresh" id="errorRefreshBtn">重新加载</button>
                            </div>
                        </td>
                    </tr>
                `;

        document.getElementById('errorRefreshBtn').addEventListener('click', () => {
          loadData(page);
        });
      });
  }

  // 刷新按钮事件
  document.getElementById('refreshBtn').addEventListener('click', function() {
    this.classList.add('fa-spin');
    loadData(currentPage).then(() => {
      setTimeout(() => {
        this.classList.remove('fa-spin');
      }, 500);
    });
  });

  // 上一页按钮事件
  document.getElementById('prevBtn').addEventListener('click', function() {
    if (currentPage > 1) {
      loadData(currentPage - 1);
    }
  });

  // 下一页按钮事件
  document.getElementById('nextBtn').addEventListener('click', function() {
    if (currentPage < totalPages) {
      loadData(currentPage + 1);
    }
  });

  // 初始化页面
  document.addEventListener('DOMContentLoaded', () => {
    loadData();
  });
</script>
</body>
</html>